<template>
  <div>
    <van-nav-bar title="电影" ref='navbar' v-show='isNavbar' @click-left='handLeft'>
      <template #left>
        <span style="font-size:13px;margin-right:3px;color: #191a1b">{{$store.state.cityName}}</span> <van-icon name="arrow-down" size='7' color='black' />
      </template>
    </van-nav-bar>
    <ul>
      <router-link
        to="/films/nowplaying"
        custom
        v-slot="{ navigate, isActive }"
      >
        <li @click="navigate">
          <span :class="isActive ? 'line' : ''">正在热映</span>
        </li>
      </router-link>
      <router-link
        to="/films/comingsoon"
        custom
        v-slot="{ navigate, isActive }"
      >
        <li @click="navigate">
          <span :class="isActive ? 'line' : ''">即将上映</span>
        </li>
      </router-link>
    </ul>
  </div>
</template>
<script>
import vant from 'vant'
import 'vant/lib/index.css'
import Vue from 'vue'
Vue.use(vant)
export default {
  data () {
    return {
      isNavbar: false
    }
  },
  mounted () {
    window.onscroll = () => {
      if ((document.documentElement.scrollTop || document.body.scrollTop) > document.querySelector('.swiper').offsetHeight) {
        this.isNavbar = true
      } else {
        this.isNavbar = false
      }
    }
  },
  methods: {
    handLeft () {
      this.$router.push('/city')
    }
  },
  destroyed () {
    window.onscroll = null
  }
}
</script>
<style lang='scss' scoped>
.line {
  color: red;
  border-bottom: 2px solid orange;
}
ul {
  width: 100%;
  height: 49px;
  background: rgb(255, 253, 253);
  display: flex;
  li {
    flex: 1;
    text-align: center;
    span {
      width: 64px;
      font-size: 14px;
      margin: 0 auto;
      line-height: 49px;
      display: block;
      height: 49px;
    }
  }
}
</style>
